<template>
  <div ref="chart" class="the-time-chart"></div>
</template>
<script>
import axios from "axios";
import Gradient from "javascript-color-gradient";
import * as Color from "color";
import * as echarts from 'echarts';
// var echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/scatter");
// require("echarts/lib/chart/line");
// require("echarts/lib/chart/radar");
// require("echarts/lib/chart/custom");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
// require("echarts/lib/component/axis");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/legend");

const radar0712 =
  "http://m.tuniucdn.com/fb2/t1/G6/M00/FE/37/Cii-U18Le3KIRyyGAAAVZlkpYDkAANp1AP_2YMAABV-30.json";
export default {
  name: "Radar",
  data() {
    return {};
  },
  mounted() {
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele);
    const Place2dizhi = {
      hatinh: [300, 250],
      khao: [550, 150],
      tatmok: [510, 250],
      mongnai: [800, 150],
      paradiseresort: [620, 320],
      campbravo: [850, 380],
      campalpha: [200, 380],
      bootcamp: [480, 450],
      bahn: [720, 480],
      lawaki: [850, 520],
      quarry: [680, 610],
      ruins: [300, 620],
      painan: [450, 650],
      kampong: [860, 680],
      cave: [650, 750],
      tambang: [170, 720],
      nakham: [250, 800],
      sahmee: [350, 850],
      campcharlie: [580, 820],
      bantai: [610, 910],
      dock: [810, 870]
    };
    this.ajaxGetData().then(data => {
      // debugger;
      let custumdata = [];
      for (let __name in data) {
        custumdata.push([
          __name,
          data[__name]["name"],
          data[__name]["down"],
          data[__name]["safezone"],
          data[__name]["items"],
          data[__name]["items_attachment"],
          data[__name]["items_use"],
          data[__name]["items_weapon"]
        ]);
      }
      let place2radarIndex = JSON.parse(
        "{" +
          Object.keys(data)
            .map((e, i) => `"${e}":${i}`)
            .join(",") +
          "}"
      );
      // debugger
      let indicator_max = {
        down: 40,
        safezone: 20,
        items: 2100,
        items_attachment: 500,
        items_use: 500,
        items_weapon: 220
      };

      chart.setOption({
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis"
        },

        legend: {
          left: "center",
          data: []
        },
        backgroundColor: "black",
        graphic: [
          {
            type: "image",
            id: "background-map",
            right: 0,
            top: 0,
            z: -10,
            bounding: "raw",
            origin: [0, 5],
            style: {
              image:
                "http://m.tuniucdn.com/fb2/t1/G6/M00/F0/BC/Cii-TF781C2IcJj7AA590so7b_UAANa_AI4S9UADn3q184.jpg",
              width: 1000,
              height: 1000,
              opacity: 0.5
            }
          }
        ],
        series: [
          {
            type: "custom",
            emphasis: {
              itemStyle: {}
            },

            renderItem: function(params, api) {
              // debugger;
              let zn = api.value(0);
              let the_name_read = api.value(1);
              let down = api.value(2);
              let safezone = api.value(3);
              let items = api.value(4);
              let items_attachment = api.value(5);
              let items_use = api.value(6);
              let items_weapon = api.value(7);
              const MAX_LENGTH = 50;
              const MAX_CIRCLE_RADIUS = 0;
              const MIN_CIRCLE_RADIUS = 0;
              let my_radius =
                MIN_CIRCLE_RADIUS +
                (MAX_CIRCLE_RADIUS - MIN_CIRCLE_RADIUS) *
                  (down / indicator_max["down"]);
              let circlecenter = Place2dizhi[zn];
              let centerColor = `hsl(${50 -
                (down / indicator_max["down"]) * 50},100%,48%)`;

              let lineColor =
                {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "hsl(101,100%,36%)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: centerColor // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                } ||
                centerColor ||
                "hsl(101,100%,36%)" ||
                "yellow";
              let arcColor = centerColor ||
                "white" || {
                  type: "radial",
                  x: 0,
                  y: 0.5,
                  r: 4,
                  colorStops: [
                    {
                      offset: 0,
                      color: centerColor // 0% 处的颜色
                    },
                    // {
                    //   offset: 0.5,
                    //   color: centerColor
                    // },
                    {
                      offset: 1,
                      color: "#00cc33" || "hsl(101,100%,36%)" // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                };
              let lineWidth = 3;

              let colorGradient = new Gradient();
              let colorLow = "#F5DD00";
              let colorHigh = "#fb3104";
              colorGradient.setGradient(colorLow, colorHigh);
              colorGradient.setMidpoint(indicator_max["down"]);
              let getGradientColorByValue = n => {
                let hex_ = colorGradient.getColor(n);
                hex_ = hex_.replace("#", "");
                while (hex_.length < 6) {
                  hex_ = "0" + hex_;
                }
                let hex = `#${hex_}`;
                // debugger;
                let c = new Color(hex);
                let rgba = c.alpha(n / n).toString();
                // debugger;
                return rgba;
              };

              let asLines = [
                {
                  type: "line",
                  id: "safezone",
                  z: 0,
                  shape: {
                    x1: circlecenter[0],
                    y1: circlecenter[1] - my_radius,
                    x2: circlecenter[0],
                    y2: circlecenter[1] - MAX_LENGTH - my_radius,
                    percent: safezone / indicator_max["safezone"]
                  },
                  rotation: ((2 * Math.PI) / 5) * 0,
                  origin: circlecenter,
                  style: {
                    stroke: lineColor,
                    lineWidth: lineWidth
                  }
                },
                {
                  type: "line",
                  id: "items",
                  shape: {
                    x1: circlecenter[0],
                    y1: circlecenter[1] - my_radius,
                    x2: circlecenter[0],
                    y2: circlecenter[1] - MAX_LENGTH - my_radius,
                    percent: items / indicator_max["items"]
                  },
                  rotation: ((2 * Math.PI) / 5) * 1,
                  origin: circlecenter,
                  style: {
                    stroke: lineColor,
                    lineWidth: lineWidth
                  }
                },
                {
                  type: "line",
                  id: "items_attachment",
                  shape: {
                    x1: circlecenter[0],
                    y1: circlecenter[1] - my_radius,
                    x2: circlecenter[0],
                    y2: circlecenter[1] - MAX_LENGTH - my_radius,
                    percent:
                      items_attachment / indicator_max["items_attachment"]
                  },
                  rotation: ((2 * Math.PI) / 5) * 2,
                  origin: circlecenter,
                  style: {
                    stroke: lineColor,
                    lineWidth: lineWidth
                  }
                },
                {
                  type: "line",
                  id: "items_use",
                  shape: {
                    x1: circlecenter[0],
                    y1: circlecenter[1] - my_radius,
                    x2: circlecenter[0],
                    y2: circlecenter[1] - MAX_LENGTH - my_radius,
                    percent: items_use / indicator_max["items_use"]
                  },
                  rotation: ((2 * Math.PI) / 5) * 3,
                  origin: circlecenter,
                  style: {
                    stroke: lineColor,
                    lineWidth: lineWidth
                  }
                },
                {
                  type: "line",
                  id: "items_use",
                  shape: {
                    x1: circlecenter[0],
                    y1: circlecenter[1] - -my_radius,
                    x2: circlecenter[0],
                    y2: circlecenter[1] - MAX_LENGTH - -my_radius,
                    percent: items_weapon / indicator_max["items_weapon"]
                  },
                  rotation: ((2 * Math.PI) / 5) * 4,
                  origin: circlecenter,
                  style: {
                    stroke: lineColor,
                    lineWidth: lineWidth
                  }
                }
              ];

              let arcAngle = Math.PI / 5;

              let asArcs = [
                {
                  type: "sector",
                  id: "safezone",
                  // z: 0,
                  shape: {
                    cx: circlecenter[0],
                    cy: circlecenter[1],
                    r:
                      MAX_LENGTH * (safezone / indicator_max["safezone"]) +
                      my_radius,
                    r0: my_radius,
                    startAngle: -arcAngle,
                    endAngle: +arcAngle
                  },
                  rotation: ((2 * Math.PI) / 5) * 0 + Math.PI / 2,
                  origin: circlecenter,
                  style: {
                    fill: "white",
                    stroke:arcColor|| "white",
                    lineWidth: 1
                  }
                },
                {
                  type: "sector",
                  id: "items",
                  shape: {
                    cx: circlecenter[0],
                    cy: circlecenter[1],
                    r:
                      MAX_LENGTH * (items / indicator_max["items"]) + my_radius,
                    r0: my_radius,
                    startAngle: -arcAngle,
                    endAngle: +arcAngle
                  },
                  rotation: ((2 * Math.PI) / 5) * 1 + Math.PI / 2,
                  origin: circlecenter,
                  style: {
                    fill: "white",
                    stroke:arcColor|| "white",
                    lineWidth: 1
                  }
                },
                {
                  type: "sector",
                  id: "items_attachment",
                  shape: {
                    cx: circlecenter[0],
                    cy: circlecenter[1],
                    r:
                      MAX_LENGTH *
                        (items_attachment / indicator_max["items_attachment"]) +
                      my_radius,
                    r0: my_radius,
                    startAngle: -arcAngle,
                    endAngle: +arcAngle
                  },
                  rotation: ((2 * Math.PI) / 5) * 2 + Math.PI / 2,
                  origin: circlecenter,
                  style: {
                    fill: "white",
                    stroke:arcColor|| "white",
                    lineWidth: 1
                  }
                },
                {
                  type: "sector",
                  id: "items_use",
                  shape: {
                    cx: circlecenter[0],
                    cy: circlecenter[1],
                    r:
                      MAX_LENGTH * (items_use / indicator_max["items_use"]) +
                      my_radius,
                    r0: my_radius,
                    startAngle: -arcAngle,
                    endAngle: +arcAngle
                  },
                  rotation: ((2 * Math.PI) / 5) * 3 + Math.PI / 2,
                  origin: circlecenter,
                  style: {
                    fill: "white",
                    stroke:arcColor|| "white",
                    lineWidth: 1
                  }
                },
                {
                  type: "sector",
                  id: "items_weapon",
                  shape: {
                    cx: circlecenter[0],
                    cy: circlecenter[1],
                    r:
                      MAX_LENGTH *
                        (items_weapon / indicator_max["items_weapon"]) +
                      my_radius,
                    r0: my_radius,
                    startAngle: -arcAngle,
                    endAngle: +arcAngle
                  },
                  rotation: ((2 * Math.PI) / 5) * 4 + Math.PI / 2,
                  origin: circlecenter,
                  style: {
                    fill: "white",
                    stroke:arcColor|| "white",
                    lineWidth: 1
                  }
                }
              ];

              return {
                type: "group",
                // silent:true,
                children: [
                  {
                    type: "circle",
                    id: "down",
                    // z: 100,
                    shape: {
                      cx: circlecenter[0],
                      cy: circlecenter[1],
                      r: my_radius
                    },
                    style: {
                      fill: "white",
                      //   "white" ||
                      //   centerColor ||
                      //   getGradientColorByValue(down) ||
                      //   `rgba(255,0,0,${down / indicator_max["down"]})`,
                      // opacity: 10.5,
                      // text: the_name_read,
                      textPosition: "bottom",
                      textFill: "white",
                      stroke: "white" || centerColor
                    }
                  },
                  {
                    type: "circle",
                    shape: {
                      cx: 0 && circlecenter[0],
                      cy: 0 && circlecenter[1],
                      r: my_radius + MAX_LENGTH
                    },
                    style: {
                      fill: "rgba(0,0,255,0)",
                      stroke: "rgba(255,255,0,0)",
                      // opacity: 10.5,
                      // text: the_name_read,
                      textPosition: "bottom",
                      textFill: "black"
                    }
                  },
                  ...asArcs
                ]
              };
            },
            data: custumdata,
            coordinateSystem: "none"
          }
        ]
      });
    });
  },
  methods: {
    ajaxGetData() {
      return new Promise(resolve => {
        axios
          .get(radar0712)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.the-time-chart {
  width: 1000px;
  height: 1000px;
}
</style>